import React from 'react';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import toFixed from 'shared/utils/toFixed';

const sanjiaoxing = require('static/sanjiaoxing.png')

export default class CategoryItem extends React.PureComponent {
  state = {
    show: true
  }

  handleGloablMonitor = (title) => {
    gloablMonitor([`首页-分类-${title}`, title])
  }

  render() {
    const { show } = this.state;
    const { CategoryItem, isAdd } = this.props;
    return (
      <div className="category-product">
        <h2 className={classNames({odd: isAdd})}>
          <span>{CategoryItem.title}</span>
          <span style={show ? {'transform':'rotate(0deg)'} : {'transform':'rotate(180deg)'}} className="caret" onClick={()=>this.setState({show: !show})} />
        </h2>
        <div className="category-product-list" style={show ? {height:window.rem(155)} : {height:'0px'}}>
          <div className="category-product-list-container">
            {
              CategoryItem && CategoryItem.productlist.map((item, index) => (
                <Link
                  key={index}
                  className="category-product-list-item"
                  to={`/ProductDetail/${item.product_id}/buyProductDetail`}
                  onClick={() => { this.handleGloablMonitor(item.title) }}
                >
                  <span className="item-title">{item.title}</span>
                  <span className="item-brief">
                    {/* <span>{item.brief && '赠 '}</span>{item.brief} */}
                  </span>
                  <span className="item-price">￥{toFixed(item.price)}</span>
                  <img src={item.image} alt='' />
                  <Link
                    to={`/ProductDetail/${item.product_id}/buyProductDetail`}
                    onClick={() => { this.handleGloablMonitor(item.title) }}
                  >
                      立即查看
                    <img src={sanjiaoxing} alt="" />
                  </Link>
                </Link>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}